<template>
  <TodoChild :showTask="showTask"  :btnState="btnState" @getTask="getTask" @done="done" @changeBtn="changeBtn" v-model="inputTask"/>
</template>

<script>
import TodoChild from './TodoChild.vue';
export default {
    components:{
        TodoChild
    },
    data() {
        return {
            taskList: [
                { task: "学习html", state: "done", id: 0 },
                { task: "学习css", state: "done", id: 1 },
                { task: "学习JS", state: "done", id: 2 },
                { task: "学习Vue", state: "undone", id: 3 },
                { task: "学习React", state: "undone", id: 4 },
            ],
            inputTask: "",
            btnState: "",
        };
    },
    methods: {
        getTask() {
            let t = {
                task: this.inputTask,
                state: "undone",
                id: this.taskList.length,
            };
            this.taskList.unshift(t);
            this.inputTask = "";
        },
        done(id) {
            for (let item of this.taskList) {
                if (item.id == id) {
                    item.state = item.state == "done" ? "undone" : "done";
                    break;
                }
            }
        },
        changeBtn(state) {
            this.btnState = state;
        },
    },
    computed: {
        showTask() {
            console.log(666);
            switch (this.btnState) {
                case "done":
                    return this.taskList.filter((item) => item.state == "done");
                case "undone":
                    return this.taskList.filter((item) => item.state == "undone");
                default:
                    return this.taskList;
            }
        },
    },

}
</script>

<style>

</style>